<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_Canvas-绘制直线</title>
  <!-- 
  在 HTML5 的 Canvas 中，绘制直线路径是通过使用 Canvas 的 2D 上下文提供的一系列方法来实现的。以下是关于在 Canvas 中绘制直线路径的总结：

  1. 基本概念
  Canvas 提供了一套 API，可以用来绘制路径、形状和图形。绘制直线路径主要涉及到路径的创建和绘制。

  2. 获取 Canvas 上下文
  在绘制之前，需要获取 Canvas 的 2D 上下文：
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  3. 绘制直线路径的步骤
   1. 开始路径
  使用  `beginPath()`  方法开始一个新路径：
  ctx.beginPath();
   2. 绘制直线
  使用  `moveTo(x, y)`  方法移动到起点，然后使用  `lineTo(x, y)`  方法绘制到目标点：
  ctx.moveTo(50, 50); // 起点
  ctx.lineTo(200, 50); // 终点
   3. 绘制路径
  使用  `stroke()`  方法来绘制路径：
  ctx.stroke(); // 绘制路径
  4. 完整示例
  以下是一个完整的示例，展示如何绘制直线路径：
  <canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>
  <script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.beginPath(); // 开始路径
  ctx.moveTo(50, 50); // 起点
  ctx.lineTo(200, 50); // 终点
  ctx.stroke(); // 绘制路径
  </script>

  5. 总结
  在 Canvas 中绘制直线路径的过程包括开始路径、指定起点和终点，以及最终绘制路径。通过这些简单的 API，开发者可以创建出复杂的图形和路径。掌握这些基本操作是使用 Canvas 绘图的基础。
  -->
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../../images/grid.png);
    }
    canvas{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <canvas id="tutorial" width="300" height="300px">
    你的浏览器不兼容Canvas,请升级您的浏览器!
  </canvas>
  <script>
    window.onload = function(){
      // 1. 获取canvas元素
      var canvas = document.getElementById('tutorial');
      // 2. 获取绘图上下文
      var ctx = canvas.getContext('2d');
      ctx.lineWidth = 5; // 设置线条宽度

      ctx.beginPath(); // 开始路径
      ctx.moveTo(50, 50); // 起点
      ctx.lineTo(200, 50); // 终点
      // ctx.closePath() // 闭合路径不是必须的，根据需求决定是否需要闭合路径
      ctx.stroke(); // 绘制线条只能用 stroke填充, 绘制路径
    }

  </script>
  
</body>
</html>